<template>
  <div>
    <el-form>
      <el-form-item label="单据编号" prop="orderNum">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="日期从" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">至</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supply">
        <el-input v-model="searchForm.supply"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="btnBox">
      <el-button type="primary">删除</el-button>
    </div>

    <div class="block">
      <p>返回200条数据 (100张)</p>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>

    <div class="table-box">
      <el-table
        :data="tableData"
      >
        <el-table-column fixed width="50" prop="check" label="" type="selection"></el-table-column>
        <el-table-column width="120" prop="number" label="单据编号"></el-table-column>
        <el-table-column width="120" prop="date" label="通知日期"></el-table-column>
        <el-table-column width="120" prop="supply" label="供应商名称"></el-table-column>
        <el-table-column width="120" prop="purchase" label="收料组织"></el-table-column>
        <el-table-column width="120" prop="documentStatus" label="单据状态"></el-table-column>
      </el-table>
    </div>
    <div class="table-title"><span>明细信息</span></div>
    <div class="table-box">
      <el-table :data="tableData1">
        <el-table-column width="120" prop="materielNum" label="物料编码"></el-table-column>
        <el-table-column width="120" prop="materielName" label="物料名称"></el-table-column>
        <el-table-column width="120" prop="Specifications" label="规格型号"></el-table-column>
        <el-table-column width="120" prop="basic" label="基本计量单位"></el-table-column>
        <el-table-column width="120" prop="quantity" label="数量"></el-table-column>
        <el-table-column width="120" prop="Warehouse" label="仓库"></el-table-column>
        <el-table-column width="120" prop="Remarks" label="备注"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'order',
    data () {
      return{
        searchForm:{
          orderNum: '',
          date1: '',
          date2: '',
          status: '',
          supply: '',
          sureStatus: '',
        },
        currentPage: 1,
        tableData:[
          {
            check: '',
            number: '1234',
            date: '2020-04-12',
            purchase: '收料组织',
            supply: '供应商名称',
            documentStatus: '单据状态',
          },
        ],
        tableData1:[
          {
            materielNum: '物料编码',
            materielName: '物料名称',
            Specifications: '规格型号',
            basic: '基本计量单位',
            quantity: '数量',
            Warehouse: '仓库',
            Remarks: '备注'
          }
        ],
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped="scoped">
</style>
